<template>
  <div class="book-wrapper h-full w-full relative">
    <div v-show="shareTop" class="popup popup-top">
      <div class="flex justify-between items-center h-100%">
        <div @click="handleReturnClick">
          <i class="i-carbon:arrow-left"></i>
          {{ booksDetail.name }}
        </div>
        <div>
          <i @click="handleDownClick" class="i-icons8-download"></i>
        </div>
      </div>
    </div>

    <div @click="handleClick" class="h-full w-full">
      <slot></slot>
    </div>
    <div v-show="shareBottom" class="popup popup-bottom">
      <div class="popup-bottom-item" @click="openMenu">
        <i class="i-system-uicons:document-stack"></i>
        <div>目录</div>
      </div>
    </div>
    <chapter ref="chapterRef" :id="bookid"></chapter>
  </div>
</template>
<script setup lang="ts">
import { toRefs, ref, onMounted } from "vue";
import useBooksStore from "@/store/modules/books";
import { onHide } from "@dcloudio/uni-app";
const booksStore = useBooksStore();
const { booksDetail } = toRefs(booksStore);
const shareTop = ref(false);
const shareBottom = ref(false);
const chapterRef = ref();
const props = defineProps({
  // 小说id
  bookid: {
    type: Number,
    default: 0,
  },
});
const { bookid } = toRefs(props);
// 定义 emit 事件
const emits = defineEmits<{
  (event: "downloadBook", ...args: any[]): void;
  (event: "handleReturn", ...args: any[]): void;
}>();
const handleClick = () => {
  shareTop.value = !shareTop.value;
  shareBottom.value = !shareBottom.value;
};
/**
 * 处理返回按钮点击事件
 * 当用户点击返回按钮时，此函数被调用，触发父组件指定的处理返回逻辑
 */
const handleReturnClick = () => {
  emits("handleReturn");
};

/**
 * 处理向下按钮点击事件
 * 当用户点击向下按钮时，此函数被调用，尽管代码片段未完整展示具体逻辑，
 * 但注释应提供关于此函数用途和行为的清晰说明
 */
const handleDownClick = () => {
  emits("downloadBook");
};

const openMenu = () => {
  chapterRef.value.handleChange(false);
};

onMounted(() => {
  console.log("bookWrapper", booksDetail.value);
});
onHide(() => {
  console.log("bookWrapper hide");
});
</script>
<style lang="scss" scoped>
.popup {
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100rpx;
  background: #b5ead7;
  padding: 0 100rpx;
}

.popup-top {
  top: 0;
  background-color: #fff;
  color: #000;
}

.popup-bottom {
  bottom: 0;
  background-color: #fff;
  color: #000;
}

.popup-bottom-item {
  height: 100%;
  width: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
